<!DOCTYPE html>
<html>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <head>
        <title>41jQuery的stop和delay方法</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .one{
                width: 100px;
                height: 100px;
                background: red;
            }
            .two{
                width: 500px;
                height: 10px;
                background: blue;
            }
        </style>
        <script src="http://code.jquery.com/jquery-1.12.4.js" 
            integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
            crossorigin="anonymous"></script>
       <script>
           $(function (param) { 
                $("button").eq(0).click(function (param) { 
                    /*
                    在jQuery的{}中可以同时修改多个属性，多个属性也会同时执行
                    */
                    // $(".one").animate({
                    //     width:500,
                    //     height:500
                    // },1000)
                    /*
                    $(".one").animate({
                        width:500
                    },1000)
                    $(".one").animate({
                        height:500
                    },1000)
                    */

                    /*
                    链式编程
                    delay():告诉系统延迟时长
                    
                    $(".one").animate({
                        width:500
                    },1000).delay(2000).animate({
                        height:500
                    },1000);
                    */

                    $(".one").animate({
                        width:500
                    },1000);
                    $(".one").animate({
                        height:500
                    },1000);
                    $(".one").animate({
                        width:100
                    },1000);
                    $(".one").animate({
                        height:100
                    },1000);
                });
                $("button").eq(1).click(function (param) { 
                    //立即停止当前的动画，继续执行后续的动画
                    // $("div").stop();
                    // $("div").stop(false);
                    // $("div").stop(false,false);

                    //立刻停止当前和后续的所有动画
                    $("div").stop(true);
                    $("div").stop(true,false);

                    //立即完成当前的，继续执行后续的
                    $("div").stop(false,true);

                    //立即完成当前的，停止执行后续的
                    $("div").stop(true,true);
                });
            });
           
       </script>
    </head>
    <body>
        <button>开始动画</button>
        <button>停止动画</button>
        <div class="one"></div>
        <div class="two"></div>
    </body>
</html>